<template>
  <div class="header">
    <div class="wrapper">
      <div class="icon"></div>
      <h1 class="title">Chicken Music</h1>
    </div>
    <!--个人中心-->
    <router-link tag="div" class="mine" to="/user">
      <i class="icon-mine"></i>
    </router-link>
  </div>
</template>

<script>
  let _this = null;

  export default {
    data(){
      return {}
    },
    methods: {
      init () {
      },
    },
    watch: {},
    props: [],
    components: {},
    computed: {},
    mounted () {
      _this = this;
      _this.init();
    },
  }
</script>


<style lang="stylus" scoped>
  @import '../../common/stylus/mixin.styl';
  @import "../../common/stylus/variable.styl"

  .header
    position relative
    height:44px
    line-height 44px
    text-align center
    color $color-theme
    font-size 0
    box-sizing border-box
    .wrapper
      padding-top 5px
      .icon
        display inline-block
        bg-image('logo')
        width 30px
        height 32px
        background-size 30px 32px
        margin-right 10px
      .title
        display inline-block
        font-size $font-size-large
        vertical-align top
    .mine
      position absolute
      top:0
      line-height 44px
      right 10px
      .icon-mine
        display block
        padding 12px
        font-size 20px
        color $color-theme

</style>
